<template>
  <div>
    无敌美少女
    {{ $store.state.user.userInfo.name }}
    <img :src="$store.state.user.userInfo.logo" alt="" />
    <input type="button" value="曾成的梦中情人" @click="changefn" />
    gitters:{{ $store.getters['getsum/sum']}}
    <ul>
      <li v-for="(obj,index) in Books" :key="index">
        <img :src="obj.img" alt="">
        {{obj.name}}
        {{obj.price}}
      </li>
    </ul>
    <h1>辅助函数的使用</h1>
     {{uname}}
     <br>
     {{name}}
  </div>
</template>

<script>
// import axios from "axios";
import {mapState,mapMutations,mapActions}  from 'vuex'
export default {
  async created() {
    // console.log(this.$store.state.name);
    // const res = await axios({
    //   url: "https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book/api/books",
    // });
    // this.$store.commit("getBooks", res.data.data);
    this.AgetBooks()
  },
  methods: {
    changefn() {
      this.changelogo({
        newlogo:
          "https://img1.baidu.com/it/u=368311875,2330843552&fm=26&fmt=auto",
        newname: "mary",
      })
    },
  ...mapMutations('user',['changelogo']),
  ...mapActions('getbook',['AgetBooks'])
  },
  computed:{
   ...mapState(['uname']),
   ...mapState('classobj',['name']),
   ...mapState('getbook',['Books'])
  }
};
</script>

<style scoped>
img {
  width: 500px;
  height: 500px;
}
</style>